<template>
    <!-- 聊天界面左右显示的消息的组件 -->
    <!-- 通知类消息，如有人加入/离开群聊等 -->
    <div class="message-notice" v-if="data.messageType == 2 || data.messageType == 'NOTICE'">
        {{ data.messageContent }}
    </div>
    <!-- 自己发送的 -->
    <div class="message-content-my" v-else-if="data.sendUserId == userInfoStore.getUserInfo().userId">
        <div
            :class="['content-panel', data.messageType == 1 || data.messageType == 'MEDIA' ? 'content-panel-media' : '']">
            <!-- 媒体消息如果状态是SENDING，即发送中，则显示一个正在加载的图片 -->
            <div class="sending" v-if="data.sendStatus == 0 || data.sendStatus == 'SENDING'">
                <el-skeleton :animated="true">
                    <template #template>
                        <el-skeleton v-if="data.fileType == 'OTHER'" :rows="1" variant="text"
                            style="width: 180px; height: 75px;"></el-skeleton>
                        <el-skeleton v-else variant="image" style="width: 170px; height: 170px;"></el-skeleton>
                    </template>
                </el-skeleton>
            </div>
            <!-- 正常消息 -->
            <template v-else>
                <!-- 文本消息 -->
                <div class="content" v-html="data.messageContent"
                    v-if="data.messageType == 0 || data.messageType == 'TEXT'">
                </div>
                <!-- 媒体消息 -->
                <div class="content" v-else>
                    <template v-if="data.fileType == 0 || data.fileType == 'IMAGE'">
                        <ChatMessageImage :data="data" @click="showDetail"></ChatMessageImage>
                    </template>
                    <template v-if="data.fileType == 1 || data.fileType == 'VIDEO'">
                        <ChatMessageVideo :data="data" @click="showDetail"></ChatMessageVideo>
                    </template>
                    <template v-if="data.fileType == 2 || data.fileType == 'OTHER'">
                        <ChatMessageFile :data="data" @click="showDetail"></ChatMessageFile>
                    </template>
                </div>
            </template>
        </div>
        <Avatar :width="35" :userId="data.sendUserId"></Avatar>
    </div>
    <!-- 别人发送的 -->
    <div class="message-content-others" v-else>
        <!-- 头像 -->
        <div class="user-avatar">
            <Avatar :width="35" :userId="data.sendUserId"></Avatar>
        </div>
        <div
            :class="['content-panel', data.contactType == 1 || data.contactType == 'GROUP' ? 'group-content' : '', data.messageType == 1 || data.messageType == 'MEDIA' ? 'content-panel-media' : '']">
            <!-- 群聊每个人都展示昵称 -->
            <div class="nick-name" v-if="data.contactType == 1 || data.contactType == 'GROUP'">
                {{ data.sendUserNickName }}
            </div>
            <!-- 媒体消息如果状态是SENDING，即发送中，则显示一个正在加载的图片 -->
            <div class="sending" v-if="data.sendStatus == 0 || data.sendStatus == 'SENDING'">
                <el-skeleton :animated="true">
                    <template #template>
                        <el-skeleton v-if="data.fileType == 'OTHER'" :rows="1" variant="text"
                            style="width: 180px; height: 75px;"></el-skeleton>
                        <el-skeleton v-else variant="image" style="width: 170px; height: 170px;"></el-skeleton>
                    </template>
                </el-skeleton>
            </div>
            <!-- 正常消息 -->
            <template v-else>
                <!-- 文本消息 -->
                <div class="content" v-html="data.messageContent"
                    v-if="data.messageType == 0 || data.messageType == 'TEXT'">
                </div>
                <!-- 媒体消息 -->
                <div class="content" v-else>
                    <template v-if="data.fileType == 0 || data.fileType == 'IMAGE'">
                        <ChatMessageImage :data="data" @click="showDetail"></ChatMessageImage>
                    </template>
                    <template v-if="data.fileType == 1 || data.fileType == 'VIDEO'">
                        <ChatMessageVideo :data="data" @click="showDetail"></ChatMessageVideo>
                    </template>
                    <template v-if="data.fileType == 2 || data.fileType == 'OTHER'">
                        <ChatMessageFile :data="data" @click="showDetail"></ChatMessageFile>
                    </template>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
import { useUserInfoStore } from "@/stores/UserInfoStore";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

import ChatMessageImage from "./ChatMessageImage.vue";
import ChatMessageVideo from "./ChatMessageVideo.vue";
import ChatMessageFile from "./ChatMessageFile.vue";

const userInfoStore = useUserInfoStore();

const props = defineProps({
    data: {
        type: Object,
        default: {}
    },
    currentChatSession: {
        type: Object,
        default: {}
    }
})

const emit = defineEmits(["showDetail"])

const showDetail = () => {
    // 加载中不处理
    if (props.data.sendStatus == 0 || props.data.sendStatus == 'SENDING') return;
    // 交给父组件处理
    emit("showDetail", props.data.messageId)
}
</script>

<style lang="scss" scoped>
.message-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #5a939e;
    margin-bottom: 20px;
}

.sending {
    width: 170px;
    overflow: hidden;
    float: right;
    margin-right: 5px;
    border-radius: 5px;
}

.content {
    display: inline-block;
    padding: 8px;
    color: #474747;
    border-radius: 5px;
    text-align: left;
    font-size: 14px;

    :deep(.emoji) {
        font-size: 20px;
    }
}

.content-panel {
    flex: 1;
    position: relative;

    &::after {
        content: '';
        position: absolute;
        display: block;
        width: 10px;
        height: 10px;
        background: #a2ccee;
        transform: rotate(45deg);
        border-radius: 2px;
        top: 13px;
    }
}

.content-panel-media {
    .content {
        border-radius: 5px;
        background: none !important;
        overflow: hidden;
        padding: 0px;
    }

    &::after {
        display: none;
    }
}

.message-content-my {
    display: flex;

    .content-panel {
        margin-right: 10px;
        text-align: right;
        padding-left: 32%;

        .content {
            background: #a2ccee;
        }

        &::after {
            right: -4px;
        }
    }
}

.message-content-others {
    display: flex;
    padding-right: 32%;

    .user-avatar {
        margin-right: 10px;
        width: 35px;
        height: 35px;
    }

    .content-panel {
        flex: 1;
        position: relative;
        text-align: left;

        .nick-name {
            font-size: 12px;
            color: #b2b2b2;
        }

        .content {
            background: #fff;
        }

        .sending {
            float: left;
        }

        &::after {
            left: -4px;
            background: #fff;
        }
    }

    .content-panel-media {
        justify-content: flex-start;
    }
}

.group-content {
    margin-top: -6px;

    .content {
        margin-top: 6px;
    }

    &::after {
        left: -4px;
        top: 35px;
        background: #fff;
    }
}
</style>
